import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import Confirm from '#cpt/temp/Confirm'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Input 	= $Lazy.load(()=>import('@antd/form/input'))
const Box 		= $Lazy.load(()=>import('#tp/box/box'))
const AddModal 	= $Lazy.state(()=>import('./cpt/add-modal'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
	}
	
	model = {}
	
	componentDidMount(){
		this.query = { kind_id: this.props.kind_id }
		this.fetch()
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'kind-rel-price/index')
	
	// 表单
	cols = [
		{ title: '物价项目代码', 	dataIndex: 'price_code', 	width:'33%' },
		{ title: '物价项目名称', 	dataIndex: 'item_name', 	width:'33%' },
		{ title: '参考价格', 		dataIndex: 'item_price', 	width:'33%' },
	]
	// 操作按钮
	controls = () => {
		const { disabled } = this.props
		return [
			Controls.click.call(this,'添加', ()=> this.modelRef.open(this.props.kind_id), { disabled } ),
			Confirm.call(this,'删除', 'kind-rel-price/delete', { isKeys: true, ghost:true })
		]
	}
	render(){
		const { disabled } = this.props
		return (
			<>
				<Box title='物价关联' controls={this.controls()} className='mt5' contentClassName={$fn.hasArray(this.state.data) ? 'pt10' : 'ptb10'}
					titlePrefix = {
						<div className='ml10'>
							<Input value={this.props.price} readOnly p='价格' disabled={disabled} />
						</div>
					}
				>
					{/* 表格 */}
					{ Table.call(this, { wrapStyle: this.props.tableStyle, disabled }) }
				</Box>
				{/* 弹窗 */}
				<AddModal onRef={ref => this.modelRef = ref} onRefresh={this.fetch} />
			</>
		)
	}
}

export default Index